<template>
	<view class="ai-video-chat-box">
		<m-video :ref="storyId" :storyId="storyId" :checkoutEvent="checkoutEvent" storyType="videoChat"
			:autoplay="autoplay" :storyUrl="storyUrl" :selfLoop="selfLoop" :loopSec="loopSec"
			@onEnded="goNextStoryAndStopCur" @videoClick="videoClick" @onPlay="onPlay"
			@handleCheckoutEvent="goNextStoryAndStopCur" @onTimeUpdate="onTimeUpdate">
		</m-video>
	</view>
</template>

<script>
	import {
		getTalkByGameAndStory
	} from "@/api/im.js";

	import {
		mapMutations,
		mapState,
		mapGetters
	} from "vuex";

	import mVideo from "@/components/m-video/index.vue";

	export default {
		components: {
			mVideo,
		},
		props: {
			// curStoryId: {
			// 	type: [String, Number],
			// },
			autoplay: {
				type: Boolean,
				default: false,
			},
			selfLoop: {
				type: Boolean,
				default: true,
			},
			loopSec: {
				type: Number,
				default: 2,
			},
			checkoutEvent: {
				type: [String],
			},
			storyId: {
				type: [Number, String],
			},
			storyNextStoryId: {
				type: [Number, String],
			},
			gameId: {
				type: [Number, String],
			},
			storySet: {
				type: [Number, String, Object],
			},
			storyUrl: {
				type: String,
			},
			actions: {
				type: Array,
				default: [],
			},
		},
		data() {
			return {};
		},
		watch: {
			storyId: {
				deep: true,
				immediate: true,
				handler(v) {},
			},
		},
		onReady() {},
		computed: {
			...mapGetters(["globalGameCtx", "loopIndex", "curGlobalLoopList"]),
			...mapState(['curStoryId', 'curStoryType'])
		},

		created() {},
		onShow() {},

		mounted() {},
		methods: {
			playVideo() {
				this.$refs[this.storyId].playVideo()
			},
			pauseVideo() {
				this.$refs[this.storyId].pauseVideo()
			},
			onTimeUpdate(e) {
				this.$emit("onTimeUpdate", e);
			},
			onPlay() {
				// console.log("当前组件是", this.storyId);
				// #ifdef MP-TOUTIAO
				// console.log("聊天组件监听到play", this.curStoryId, this.storyId)
				if (this.curStoryId != this.storyId) {
					console.log(
						`当前播放剧情【${this.curStoryId}】，当前要暂停的剧情【${this.storyId}】 AiVideoChat 类型:${this.curStoryType}----------`
					)
					this.$refs[this.storyId].pauseVideo()
				}
				// #endif
			},
			getNextStoryId() {
				return new Promise((resolve, reject) => {
					let nextStoryId;

					if (this.globalGameCtx.nextStoryId) {
						nextStoryId = this.globalGameCtx.nextStoryId;
						// 重置循环列表下标
						this.$store.dispatch("setLoopIndex", 0).then((res) => {
							resolve(nextStoryId);
						});
					} else if (
						!this.globalGameCtx.nextStoryId &&
						this.curGlobalLoopList.length > 0 && this.curStoryId != this.curGlobalLoopList[this
							.loopIndex]
					) {
						nextStoryId = this.curGlobalLoopList[this.loopIndex];
						// 递增
						let index = this.loopIndex;
						if (this.loopIndex === this.curGlobalLoopList.length - 1) {
							index = 0;
						} else {
							index = index + 1;
						}
						this.$store.dispatch("setLoopIndex", index).then((res) => {
							resolve(nextStoryId);
						});
					} else if (this.storyNextStoryId) {
						nextStoryId = this.storyNextStoryId;
						// 重置循环列表下标
						this.$store.dispatch("setLoopIndex", 0).then((res) => {
							resolve(nextStoryId);
						});
					} else {
						resolve("");
					}
				});
			},

			// 重置循环列表下标
			resetLoopIndex() {
				this.$store.dispatch("setLoopIndex", 0);
			},
			// 递增循环列表下标
			addLoopIndex() {
				let index = this.loopIndex;
				if (this.loopIndex === this.curGlobalLoopList.length - 1) {
					index = 0;
				} else {
					index = index + 1;
				}
				this.$store.dispatch("setLoopIndex", index);
			},
			videoClick() {
				this.$emit("videoClick");
			},
			stopStory(callback, destory = false) {
				this.stopVideo((flag) => {
					callback(flag);
				}, destory);
			},
			stopVideo(callback, destory = false) {
				// console.log("视频暂停被触发");
				this.$refs[this.storyId].stopVideo((flag) => {
					callback(flag);
				}, destory);
			},
			getDuration(callback) {
				let flag = this.$refs[this.storyId].getDuration();
				callback(flag);
			},
			// 此项是否可播放
			canChangeCurrent(callback) {
				callback(this.$refs[this.storyId].canPlay);
			},
			// 是否播放完毕
			onEndedEvent(callback) {
				callback(this.$refs[this.storyId].onEndedEvent);
			},
			// 检测新项是否可跳转，跳转新项，暂停旧项
			goNextStoryAndStopCur() {

				this.getNextStoryId().then((nextStoryId) => {
					if (nextStoryId) {
						console.log(
							`当前剧情【${this.storyId}】播放结束，检测目标剧情【${nextStoryId}】是否存在 getNextStoryId----------`)
						// 检测目标项是否可跳转
						this.$emit("playTargetStory", [
							nextStoryId,
							(flag) => {
								if (flag) {
									console.log(flag,
										`目标剧情【${nextStoryId}】是否可播放 goNextStoryAndStopCur----------`)
								}
							},
						]);
					}
				});
			},
			startPlay(callback) {
				this.$refs[this.storyId].rePlayVideo((flag) => {
					callback(flag);
				});
			},
		},
	};
</script>


<style lang="scss">
	.u-badge-dot {
		width: 36rpx;
		height: 36rpx;
	}
</style>
<style lang="scss" scoped>
	@import "./index.scss";
</style>